<template>
  <el-row type="flex" class="payment-choose">
    <el-radio
      class="item"
      v-model="balanceChoose"
      :label="item"
      border
      v-for="(item, index) in paymentList"
      :key="index"
    >
      <div class="tag">
        <i class="Angle"></i>
        <i class="el-icon-check"></i>
      </div>
      <div v-if="item == 'wxpay'" class="wxpay"><i class="edu-icon-weixin"></i>微信支付</div>
      <div v-if="item == 'alipay'" class="alipay">
        <i class="edu-icon-zhi"></i><i class="edu-icon-fubao"></i>
      </div>
      <edu-image
        :src="require('@/assets/images/public/paypal.png')"
        v-if="item == 'paypal'"
      ></edu-image>
      <edu-image
        :src="require('@/assets/images/public/lcnpay.png')"
        v-if="item == 'lcnpay'"
      ></edu-image>
      <edu-image
        :src="require('@/assets/images/public/income.png')"
        v-if="item == 'income'"
      ></edu-image>
      <div class="lcnpay" v-if="item == 'lcnpay'">
        <span class="text">余额</span>
        <span class="num">({{ balance }})</span>
      </div>
      <div class="lcnpay" v-if="item == 'income'">
        <span class="text">收入</span>
        <span class="num">({{ income }})</span>
      </div>
    </el-radio>
  </el-row>
</template>

<script>
export default {
  props: ['paymentList', 'payment', 'balance', 'income'],
  data() {
    return {
      balanceChoose: this.payment
    }
  },
  watch: {
    balanceChoose(val) {
      this.$emit('update:value', val)
    },
    payment: {
      handler(now, old) {
        this.balanceChoose = now
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.payment-choose {
  flex-wrap: wrap;
  .item {
    margin-right: 20px;
    margin-top: 10px;
    &.el-radio {
      margin-right: 20px;
    }
    &.el-radio.is-bordered {
      + .el-radio.is-bordered {
        margin-left: 0;
      }
      width: 160px;
      height: 60px;
      padding: 0;
      position: relative;
      border-radius: 0;
      ::v-deep .el-radio__input {
        position: absolute;
        opacity: 0;
        top: 0;
      }
      ::v-deep .el-radio__label {
        height: 60px;
        padding-left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .el-radio__input.is-checked + .el-radio__label .tag {
      opacity: 1;
    }
    .tag {
      position: absolute;
      right: 0;
      top: 0;
      opacity: 0;
      transition: all 0.2s;
      .Angle {
        position: absolute;
        right: -13px;
        top: -13px;
        width: 0;
        height: 0;
        border: 13px solid transparent;
        @include edu-color-primary(border-top-color);
        transform: rotate(-135deg);
      }
      .el-icon-check {
        position: absolute;
        right: 0;
        top: -1px;
        color: #fff;
        font-size: 12px;
      }
    }
    .wxpay {
      display: flex;
      align-items: center;
      color: $text-color-secondary;
      font-size: 14px;
      .edu-icon-weixin {
        color: #3bb034;
        font-size: 27px;
        margin-right: 9px;
      }
    }
    .alipay {
      display: flex;
      align-items: center;
      .edu-icon-zhi {
        font-size: 27px;
        color: #00a0e9;
      }
      .edu-icon-fubao {
        font-size: 27px;
        color: #595757;
        margin-left: 5px;
      }
    }
    .lcnpay {
      margin-left: 5px;
      .text {
        color: $text-color-secondary;
      }
      .num {
        @include edu-color-auxiliary;
      }
    }
  }
}
</style>
